<template>
    <div class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <p>我们是一家致力于提供优质医疗服务的公司，帮助患者轻松预约挂号。</p>
            </div>
            <div class="footer-section">
                <h4>联系信息</h4>
                <p>电话: 182-7345-1223</p>
                <p>邮箱: 984152138@qq.com</p>
            </div>
            <div class="footer-section">
                <h4>社交媒体</h4>
                <ul class="social-media">
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Instagram</a></li>
                </ul>
            </div>
        </div>
    <div class="footer-bottom">
        <p>&copy; 2024 预约挂号系统. 保留所有权利.</p>
    </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
    .footer {
        background-color: #4CAF50; /* 页脚背景颜色 */
        color: white; /* 字体颜色 */
        padding: 20px 0; /* 上下内边距 */

        .footer-content {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: space-around; /* 项目之间留白 */
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 垂直居中 */
            padding: 0 20px; /* 左右内边距 */

            .footer-section {
                flex: 1; /* 每个部分均分 */
                margin: 0 10px; /* 每个部分的左右间距 */

                h4 {
                    margin-bottom: 10px; /* 标题与内容之间的间距 */
                }
            }

            .social-media {
                decoration: none;
                list-style: none; /* 去掉列表样式 */
                padding: 0; /* 去掉内边距 */

                li {
                    display: inline; /* 水平排列社交链接 */
                    margin-right: 15px; /* 社交链接之间的间距 */
                }
            }
        }

        .footer-bottom {
            text-align: center; /* 文本居中 */
            margin-top: 20px; /* 上边距 */
            font-size: 14px; /* 字体大小 */
        }
    }
</style>